<template>
    <div style="width: 100%">
        <div style="padding: 50px">
            <!--        以下代码是搜索选项框的展示-->
            <el-row :gutter="20" style="height: 30px">
                <el-form ref="form" label-width="80px">

                    <el-col :span="6">
                        <div>
                            <el-form-item label-width="auto">
                                <el-input v-model="form_search.person_name" placeholder="客户姓名" size="mini"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="1">
                        <div>
                            <el-form-item label-width="auto" >
                                <el-button type="primary" @click="search_leave_by_name()" size="mini">查询</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="5">
                        <div>
                            <el-form-item label-width="auto" >
                                <el-button @click="new_leave_dialog_visible=true" size="mini"><i class="el-icon-plus"></i>退住办理</el-button>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-form>
            </el-row>
            <!--            -->
            <!--            -->
            <!--            退住办理申请页面-->
            <!--            -->
            <!--            -->
            <el-dialog ref="new_leave_dialog"
                        title="退住办理申请页面"
                        :visible.sync="new_leave_dialog_visible"
                        width="30%"
                        style="min-width: 600px"
            >
                <span>
                    <el-divider></el-divider>
                    <el-form ref="new_leave_form"
                             :model="new_leave_dialog_data"
                             label-width="120px"
                             size="mini"
                             :rules="new_leave_dialog_rules">
                        <el-form-item label="客户姓名:" prop="name">
                            <el-input v-model="new_leave_dialog_data.name" placeholder="请输入【客户姓名】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="身份证号:" prop="identify_number">
                            <el-input v-model="new_leave_dialog_data.identify_number" placeholder="请输入【身份证号】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="退住类型:" prop="type">
                             <el-select v-model="new_leave_dialog_data.type" value="正常退住">
                                 <el-option label="正常退住" value="正常退住"></el-option>
                                 <el-option label="亡故退住" value="亡故退住"></el-option>
                                 <el-option label="保留床位" value="保留床位"></el-option>
                             </el-select>
                        </el-form-item>
                        <el-form-item label="退住原因:" prop="reason">
                            <el-input v-model="new_leave_dialog_data.reason" placeholder="请输入【退住原因】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="退住日期:" prop="date">
                            <el-date-picker type="date" placeholder="选择日期" v-model="new_leave_dialog_data.date"
                                            style="width: 100%;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="new_leave_dialog_data.remark" placeholder="请输入【备注】信息"></el-input>
                        </el-form-item>
                        <el-button type="warning" @click="form_reset('new_leave_form')" >清空</el-button>
                        <el-divider></el-divider>

                    </el-form>

                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="new_leave_dialog_visible=false">取 消</el-button>
                    <el-button type="primary" @click="handle_new_leave_dialog_submit('new_leave_form')">确 定</el-button>
                </span>
            </el-dialog>
            <!--            -->
            <!--            -->
            <!--            退住记录修改页面-->
            <!--            -->
            <!--            -->
            <el-dialog ref="change_leave_dialog"
                       title="退住记录修改页面"
                       :visible.sync="change_leave_dialog_visible"
                       width="30%"
                       style="min-width: 600px"
            >
                <span>
                    <el-divider></el-divider>
                    <el-form ref="change_leave_form"
                             :model="change_leave_dialog_data"
                             label-width="120px"
                             size="mini"
                             :rules="change_leave_dialog_rules">
                        <el-form-item label="客户姓名:" prop="name">
                            <el-input v-model="change_leave_dialog_data.name" placeholder="请输入【客户姓名】信息" :disabled="true"></el-input>
                        </el-form-item>
                        <el-form-item label="退住类型:" prop="type">
                             <el-select v-model="change_leave_dialog_data.type" value="1">
                                 <el-option label="正常退住" value="1"></el-option>
                                 <el-option label="亡故退住" value="2"></el-option>
                                 <el-option label="保留床位" value="3"></el-option>
                             </el-select>
                        </el-form-item>
                        <el-form-item label="退住原因:" prop="reason">
                            <el-input v-model="change_leave_dialog_data.reason" placeholder="请输入【退住原因】信息"></el-input>
                        </el-form-item>
                        <el-form-item label="退住日期:" prop="date">
                            <el-date-picker type="date" placeholder="选择日期" v-model="change_leave_dialog_data.date"
                                            style="width: 100%;" value-format="yyyy-MM-dd">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="备注:" prop="remark">
                            <el-input v-model="change_leave_dialog_data.remark" placeholder="请输入【备注】信息"></el-input>
                        </el-form-item>
                        <el-divider></el-divider>

                    </el-form>

                </span>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="change_leave_dialog_visible=false">取 消</el-button>
                    <el-button type="primary" @click="handle_change_leave_dialog_submit('change_leave_form')">确 定</el-button>
                </span>
            </el-dialog>
            <!--            -->
            <!--            -->
            <!--            退住记录展示页面-->
            <!--            -->
            <!--            -->
            <el-table
                    :data="leave_list"
                    style="width: 100%"
                    highlight-current-row
                    size="mini"
            >
                <el-table-column
                        prop="id"
                        label="单号"
                >
                </el-table-column>
                <el-table-column
                        prop="name"
                        label="客户姓名"
                >
                </el-table-column>
                <el-table-column
                        prop="gender"
                        label="性别"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="age"
                        label="年龄"
                        width="50px">
                </el-table-column>
                <el-table-column
                        prop="file_number"
                        label="档案号"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="checkin_date"
                        label="入住日期"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="leave_date"
                        label="退住日期"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="type"
                        label="退住类型">
                </el-table-column>
                <el-table-column
                        prop="reason"
                        label="退住原因">
                </el-table-column>
                <el-table-column
                        prop="leave_status"
                        label="状态">
                </el-table-column>
                <el-table-column
                        prop="apply_date"
                        label="申请日期"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="approval_date"
                        label="审核日期"
                        width="100px">
                </el-table-column>
                <el-table-column
                        prop="approver"
                        label="审核人">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="备注"
                        width="100px">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="50px">
                    <template slot-scope="scope">
                        <el-button @click="handleChangeDialogOpen(scope.row)" type="text" size="mini">修改</el-button>
                        <el-button v-show="use_record_delete" @click="handleDelete(scope.row)" type="text" size="small" style="color: orangered">删除</el-button>
                        <!--                        注意这里的scope.row直接就包含了所有的数据-->
                    </template>
                </el-table-column>
            </el-table>


            <el-row style="float: right;margin: 0">
                <label>当前为第{{page_select.current_page}}页，共计{{page_select.total_page}}页</label>
                <el-form :inline="true">
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-arrow-left" @click="decrease_page()" size="mini">上一页</el-button>
                        <el-button type="primary" @click="increase_page()" size="mini">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
                        <el-input type="primary" placeholder="请输入页码" style="max-width: 120px"
                                  v-model="page_select.page_input" size="mini"
                        ></el-input>
                        <el-button type="primary" @click="change_page()" size="mini">Go!</el-button>


                    </el-form-item>


                </el-form>
            </el-row>
        </div>
    </div>
</template>

<script>
    import qs from 'qs'
    import axios from 'axios'
    export default {
        name: "leave",
        mounted(){
          this.search_leave_by_name();
        },

        data(){
            return{
                form_search:{
                    person_name:'',

                },
                page_select:{
                    current_page:1,
                    search_type:1,
                    total_page:1,
                    page_input:'',
                },
                leave_list:[],
                new_leave_dialog_visible:false,
                new_leave_dialog_data:{
                    name:'',
                    identify_number:'',
                    reason:'',
                    type:'正常退住',
                    date:'',
                    remark:'',

                },
                new_leave_dialog_rules:{
                    name:[{required: true, message: '请输入客户姓名', trigger: 'blur' }],
                    identify_number:[{required: true, message: '请输入客户身份证号', trigger: 'blur' }],
                    reason:[{required: false, message: '请输入退住原因', trigger: 'blur' }],
                    type:[{required: true, message: '请选择退住类型', trigger: 'blur' }],
                    date:[{required: true, message: '请输入申请日期', trigger: 'blur' }],
                    remark:[{required: false, message: '请输入备注', trigger: 'blur' }],
                },

                change_leave_dialog_visible:false,
                change_leave_dialog_data:{
                    id:'',
                    name:'',
                    reason:'',
                    type:'',
                    date:'',
                    remark:'',
                },
                change_leave_dialog_rules:{
                    name:[{required: false, message: '请输入客户姓名', trigger: 'blur' }],
                    reason:[{required: false, message: '请输入退住原因', trigger: 'blur' }],
                    type:[{required: true, message: '请选择退住类型', trigger: 'blur' }],
                    date:[{required: true, message: '请输入申请日期', trigger: 'blur' }],
                    remark:[{required: false, message: '请输入备注', trigger: 'blur' }],
                },
                use_record_delete:false,
            }
        },
        methods:{
            search_leave_by_name(){
                let obj={
                    "search_name":this.$data.form_search.person_name,
                    "page":this.$data.page_select.current_page,
                };
                axios({
                    method:'post',
                    url:'/api/leave_page/search_leave_record_by_name',
                    data:qs.stringify(obj),
                }).then(res=>{
                    if(res.data.rs===true){
                        this.$data.leave_list=res.data.data.checkout_list;
                        this.$data.page_select.total_page=res.data.data.total_page;
                    }else {
                        this.$data.go_out_list=[];
                        this.$data.page_select.total_page=1;
                        alert("搜索失败！message="+res.data.errMsg);
                    }
                });
            },
            handle_new_leave_dialog_submit(form_name){
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认登记?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {

                            axios({
                                method:'post',
                                url:'/api/leave_page/new_leave_record',
                                data:qs.stringify(this.$data.new_leave_dialog_data),
                            }).then(res=>{
                                if(res.data.rs===true) {
                                    this.$message({
                                        type: 'success',
                                        message: '登记成功!',
                                    });
                                    this.$data.new_leave_dialog_visible = false;
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: '登记失败：'+res.data.errMsg,
                                    });
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消登记'
                            });
                        });
                    } else {
                        return false;
                    }
                });
            },
            form_reset(form_name){
                this.$refs[form_name].resetFields();

            },
            handleDelete(row){
                this.$confirm('此操作将永久删除该条信息, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/api/leave_page/delete_record',
                        data:qs.stringify({"id":row.id}),
                    }).then(res=>{
                        if(res.data.rs===true) {
                            this.$message({
                                type: 'success',
                                message: '删除成功!',
                            });
                        }else{
                            this.$message({
                                type: 'error',
                                message: '删除失败：'+res.data.errMsg,
                            });
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            handleChangeDialogOpen(row){
                console.log(row);
                this.$data.change_leave_dialog_visible=true;
                this.$data.change_leave_dialog_data.id=row.id;
                this.$data.change_leave_dialog_data.name=row.name;
                this.$data.change_leave_dialog_data.reason=row.reason;
                this.$data.change_leave_dialog_data.type=row.type;
                this.$data.change_leave_dialog_data.date=row.leave_date;
                this.$data.change_leave_dialog_data.remark=row.remark;

            },
            handle_change_leave_dialog_submit(form_name){
                this.$refs[form_name].validate((valid) => {
                    if (valid) {
                        this.$confirm('是否确认登记?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            let obj={
                                "id":this.$data.change_leave_dialog_data.id,
                                "remark":this.$data.change_leave_dialog_data.remark,
                                "reason":this.$data.change_leave_dialog_data.reason,
                                "type":this.$data.change_leave_dialog_data.type,
                                "date":this.$data.change_leave_dialog_data.date,
                            };
                            axios({
                                method:'post',
                                url:'/api/leave_page/change_leave_record',
                                data:qs.stringify(obj),
                            }).then(res=>{
                                if(res.data.rs===true) {
                                    this.$message({
                                        type: 'success',
                                        message: '登记成功!',
                                    });
                                    this.$data.change_leave_dialog_visible = false;
                                    this.search_leave_by_name();
                                }else{
                                    this.$message({
                                        type: 'error',
                                        message: '登记失败：'+res.data.errMsg,
                                    });
                                }
                            });
                        }).catch(() => {
                            this.$message({
                                type: 'info',
                                message: '已取消登记'
                            });
                        });
                    } else {
                        return false;
                    }
                });
            },
            decrease_page(){
                if(this.$data.page_select.current_page>1){
                    this.$data.page_select.current_page--;
                }
                this.search_go_out_by_name();
            },
            increase_page(){
                this.$data.page_select.current_page++;
                this.search_leave_by_name();
            },
            change_page(){
                let num=parseInt(this.$data.page_select.page_input);
                if(isNaN(num)){
                    alert("请输入正确的数字！");
                    this.$data.page_select.page_input='';
                }else if(num<=0){
                    alert("请输入正整数！");
                    this.$data.page_select.page_input='';
                }else{
                    this.$data.page_select.current_page=num;
                    this.search_go_out_by_name();
                }
            },
        }
    }
</script>

<style scoped>

</style>